<template>
	<view class="content">
		<view class="goods dl">
			<dt><image :src="img"></image></dt>
			<dd>
				<h2>{{name}}</h2>
				<!-- <span>适用型号：9F-1A</span> -->
			</dd>
		</view>
		<view class="repair">
			<h2>联系方式</h2>
			<li><text>姓名</text><input v-model="form.user_name" placeholder="请填写维修人姓名" placeholder-class="placeholder" /></li>
			<li><text>手机号</text><input v-model="form.user_mobile" maxlength="11" placeholder="请填写维修手机号码" placeholder-class="placeholder" /></li>
			<li @tap='selectArea'><text>省市区</text><span>
				<em v-if="!selectText">请选择省市区</em><em class="now" v-else>{{areaText}}</em><icon class="icon-arrow"></icon></span>
			</li>
			<li><text>详细地址</text><input v-model="form.addr_detail" placeholder="请填写小区，楼栋门牌号" placeholder-class="placeholder" /></li>
			<li><text>归属医院</text><input v-model="form.belong_hospital" placeholder="请填写归属医院" placeholder-class="placeholder" /></li>
			
			
		</view>
		<view class="cause">
			<li><span>故障原因</span><textarea v-model="form.aas_context" placeholder="请输入故障描述" placeholder-class="textarea" /></li>
		</view>
		<view class="cause">
			<li>
				<span>上传图片</span>
				<view class="upload">
					<van-uploader :file-list="fileList" multiple max-count="3" @after-read="afterRead" @delete='deleteFn' :deletable="true"/>
				</view>
			</li>
		</view>
		<view class="fixed" @tap="submit">
			<span>确认报修</span>
		</view>
		
		<!--城市容器-->
		<lb-picker ref="picker" :list="area" v-model="selectText" level="3" mode="multiSelector"
			@change="handleChange"
			@confirm="handleConfirm"
			@cancel="handleCancel">
			<view slot="cancel-text">取消</view>
			<view slot="confirm-text">确定</view>
		</lb-picker>
		<!--城市联动插件地址 https://ext.dcloud.net.cn/plugin?id=1111-->

	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import areaData from '@/common/area-data-min'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				img:'',
				name:'',
				id:'',
				fileList:[],
				img_files:[],
				form:{
					user_name:'',
					user_mobile:'',
					addr_detail:'',
					aas_context:'',
					belong_hospital:'',
					addr_province:'',
					addr_city:'',
					addr_area:'',
				},
				
				area: areaData,
				selectText: '',
				areaText:''
				
			}
		},
		onLoad(e) {
			this.img = e.img
			this.name = e.name
			this.id = Number(e.id)
		},
		methods: {
			
			selectArea() {
				this.$refs.picker.show()
			},
			handleChange (e) {
			  console.log('change::', e)
			},
			handleConfirm (e) {
			  // 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
			  if (e) {
			    const name = e.dataset.name
			    this.areaText = e.item.map(m => m.label).join('-')
				
				this.form.addr_province = e.value[0]
				this.form.addr_city = e.value[1]
				this.form.addr_area = e.value[2]
			  }
			},
			handleCancel (e) {
			  console.log('cancel::', e)
			},
			
			
			

			afterRead(event) {
			    const { file } = event.detail;
				this.fileList.push(...file);
				
				file.forEach(item=>{
				  wx.getFileSystemManager().readFile({
					filePath: item.url, 
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						this.img_files.push(res.data)
					}
				  })
				})
			},
			submit(){
				console.log(this.fileList,this.form)
				if(!this.form.user_name){
					uni.showToast({
						icon:'error',
						title: '请输入姓名',
					});
					return
				}
				if(!this.form.user_mobile){
					uni.showToast({
						icon:'error',
						title: '请输入手机号',
					});
					return
				}
				if(!this.form.addr_detail){
					uni.showToast({
						icon:'error',
						title: '请输入详细地址',
					});
					return
				}
				if(!this.form.aas_context){
					uni.showToast({
						icon:'error',
						title: '请输入故障描述',
					});
					return
				}
				if(!this.form.addr_province){
					uni.showToast({
						icon:'error',
						title: '请选择地址',
					});
					return
				}
				if(!this.form.belong_hospital){
					uni.showToast({
						icon:'error',
						title: '请输入归属医院',
					});
					return
				}
				
				
				
				this.$api({
					url: `/after/apply`,
					method: "POST",
					data: {
						pid:this.id,
						aas_imgs:this.img_files.toString(),
						...this.form,
					}
				}).then(res=>{
					uni.navigateTo({
						url:'../order/after-success'
					})
				})
			},
			navigateto(url) {
				wx.navigateTo({
					url: url
				})
			},
			deleteFn(event){
				this.fileList.splice(event.detail.index,1)
				this.img_files.splice(event.detail.index,1)
			}
		}
	}
</script>

<style lang="scss">
	
	.content {
		padding-bottom: calc(env(safe-area-inset-bottom) + 124rpx);
	}
	
	.goods {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		dt {
			width: 152rpx;
			image {
				width: 152rpx;
				height: 152rpx;
			}
		}
		dd {
			flex: 1;
			position: relative;
			padding-left: 24rpx;
			h2 {
				height: 80rpx;
				font-size: 28rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			span, em {
				display: block;
				font-size: 24rpx;
				margin: 10rpx 0 0;
				color: #999;
			}
			em {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
	
	.repair {
		margin: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		// padding: 10rpx 30rpx;
		padding: 30rpx 30rpx 10rpx;
		h2 {
			font-size: 28rpx;
		}
		li {
			display: flex;
			align-items: center;
			height: 92rpx;
			border-bottom: 2rpx solid #d8d8d8;
			&:last-of-type {
				border-bottom: none;
			}
			text {
				min-width: 180rpx;
				font-size: 28rpx;
			}
			input {
				flex: 1;
				font-size: 28rpx;
				text-align: right;
			}
			span {
				color: #999;
				display: flex;
				align-items: center;
				flex: 1;
				justify-content: flex-end;
				icon {
					display: flex;
					font-size: 26rpx;
					margin-left: 10rpx;
				}
				em {
					&.now {
						color: #333;
					}
				}
			}
		}
	}
	
	.cause {
		margin: 20rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		li {
			display: flex;
			flex-direction: column;
			span {
				font-size: 28rpx;
			}
			textarea {
				width: 100%;
				height: 200rpx;
				margin: 30rpx 0 0;
				font-size: 28rpx;
			}
			.upload {
				display: flex;
				margin: 30rpx 0 0;
				.img {
					width: 152rpx;
					height: 152rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					position: relative;
					margin-right: 50rpx;
					&.line {
						border: 2rpx solid #d8d8d8;
					}
					icon {
						display: flex;
						&.icon-camera {
							font-size: 50rpx;
							color: #999;
						}
						&.icon-unusual {
							position: absolute;
							right: -20rpx;
							top: -20rpx;
							font-size: 24rpx;
							color: #fff;
							border-radius: 100%;
							background: #dc261b;
							width: 40rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					text {
						color: #999;
						text-align: center;
						padding: 10rpx 20rpx 0;
						font-size: 24rpx;
						line-height: 1.2;
					}
					image {
						width: 152rpx;
						height: 152rpx;
					}
				}
			}
		}
	}
	
	.placeholder, .textarea {
		color: #999;
	}
	
	.fixed {
		width: 100%;
		padding: 20rpx 30rpx calc(env(safe-area-inset-bottom) + 20rpx);
		background: #f6f6f6;
		position: fixed;
		bottom: 0;
		left: 0;
		span {
			display: block;
			height: 84rpx;
			background: #dc261b;
			line-height: 84rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			border-radius: 50rpx;
		}
	}
	
</style>
